<template>
    <div>
 <!-- 里面写ele-table组件-->
        <!-- <ele-table :data="tableData" treetable style="width: 100%">
          <ele-table-column prop="id" label="姓名">
            <template slot-scope="scope">
              <div :style="`padding-left:${20*(scope.row._indent-1)}px`">
                <span  v-if="scope.row.children">
                  <i v-if="scope.row._expand" >-</i><i v-else>+</i>
                </span>
                <span>{{scope.row.id}}</span>
              </div>
            </template>
          </ele-table-column>
          <ele-table-column prop="id" label="年龄" width="180">
          </ele-table-column>
          <ele-table-column
            prop="label"
            label="地址">
          </ele-table-column>
        </ele-table> -->
        <ele-table
          :draggablerow='true'
          :allow-drag="allowdrag" 
          :allow-drop="allowDrop" 
          :data="tableData"
          @node-drag-start="handleDragStart"
          @node-drag-enter="handleDragEnter"
          @node-drag-leave="handleDragLeave"
          @node-drag-over="handleDragOver"
          @node-drag-end="handleDragEnd"
          style="width: 100%">
          <ele-table-column prop="name" label="姓名"   width="180">
          </ele-table-column>
          <ele-table-column
            prop="age"
            label="年龄"
            width="180">
          </ele-table-column>
          <ele-table-column
            prop="address"
            label="地址">
          </ele-table-column>
        </ele-table>
    </div>
</template>

<script>
 import { eleTable, eleTableColumn } from "ele-table";
    import 'ele-table/dist/ele-table.css'; 
    export default {
         data(){
            return{
                tableData: [
                    {
                        name: '王小虎1',
                        age: 12,
                        address: '上海市普陀区金沙江路 1518 弄',
                        id: 200333
                    },
                    {
                        name: '王小虎2',
                        age: 13,
                        address: '上海市普陀区金沙江路45465 弄',
                        id: 200343
                    }
                ],
                allowdrag:function(){return true},
                allowDrop:function(){return true}
            }
        },
        components: {
            eleTable,
            eleTableColumn 
        },
        methods: {
            handleDragEnd(row, column, cell, event) {
                console.log(event,"1");
              let data = this.tableData[row.draggingcolumn];
              if (cell == "after") {
                this.tableData.splice(column.dropcolumn + 1, 0, data);
                if (row.draggingcolumn > column.dropcolumn) {
                  this.tableData.splice(row.draggingcolumn + 1, 1);
                } else {
                  this.tableData.splice(row.draggingcolumn, 1);
                }
              }
              if (cell == "before") {
                this.tableData.splice(column.dropcolumn, 0, data);
                if (row.draggingcolumn > column.dropcolumn) {
                  this.tableData.splice(row.draggingcolumn + 1, 1);
                } else {
                  this.tableData.splice(row.draggingcolumn, 1);
                }
              }
              if (cell == "inner") {
                this.$set(
                  this.tableData,
                  row.draggingcolumn,
                  this.tableData[column.dropcolumn]
                );
                this.$set(this.tableData, column.dropcolumn, data);
              }
            },
            handleDragStart(){
                console.log(1);
            },
            handleDragEnter(){
                console.log(2);
            },
            handleDragLeave(){
                console.log(3);
            },
            handleDragOver(){
                console.log(4);
            }
        },
    }
</script>

<style scoped>

</style>